<!--  -->
<template>
  <div class="leftTopModule">
    <header class="head">
        <titleModule :title="state.titleName"></titleModule>
    </header>
    <section class="main" id="main"></section>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import titleModule from '../../components/title/index.vue'
import { Bar } from '@antv/g2plot';
const state = reactive({
    titleName:'人口'
})
//创建饼图
const createBar = () =>{
    //1.创建数据源
    const data = [
        { year: '海淀区', sales: 15353 },
        { year: '昌平', sales: 2176 },
        { year: '东城区', sales: 1561 },
        { year: '西城区', sales: 2616 },
        { year: '朝阳区', sales: 1226 },
    ]
    //2.创建bar对象
    const barPlot = new Bar('main',{
        data,
        xField:'sales',
        yField:'year',
        colorField:'year',
        color:(d)=>{
            console.log(d)
            if(d.year == '海淀区') return '#5AD8A6';
            if(d.year == '昌平') return '#F6BD16';
            if(d.year == '东城区') return '#E86452';
            if(d.year == '西城区') return '#6DC8EC';
            if(d.year == '朝阳区') return '#945FB9';
        },
        xAxis:{
            label:{
                visible:false,
                style:{
                    fontSize:17,
                }
            },
            tickLine:{
                visible:false
            }
        },
        yAxis:{
            label:{
                style:{
                    fontSize:17,
                }
            },
            grid:{
                visible:false
            }
        },
    })
    //3.渲染
    barPlot.render();
}

onMounted(()=>{
    createBar()
})
</script>
<style  scoped>
.leftTopModule{
    width: 100%;
    height: 100%;
}
.head{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main{
    width: 95%;
    height: 82%;
    margin: 0 auto;
}
</style>